<template>
	<view class="air">
		<view class="content">
			<image src="../../static/img/air.png" mode=""></image>
		</view>
		<view class="btn">
			<view class="item" style="padding-left: 20upx;">
				<image src="../../static/img/lamp-btn.png"></image>
				<text>电源</text>
			</view>
			<view class="item" style="padding-left: 20upx;">
				<image src="../../static/img/chushi.png"></image>
				<text>除湿</text>
			</view>
			<view class="item" style="padding-left: 60upx;">
				<view class="temperature">
					<view class="minus"><image src="../../static/img/air-jian.png"></image></view>
					18℃
					<view class="plus"><image src="../../static/img/air-jia.png"></image></view>
				</view>
				<text style="text-align: left; padding-left: 80upx;">温度调节</text>
			</view>
		</view>
		<view class="btn">
			<view class="item">
				<image src="../../static/img/zhileng.png"></image>
				<text>制冷</text>
			</view>
			<view class="item">
				<image src="../../static/img/zhire.png"></image>
				<text>制热</text>
			</view>
			<view class="item">
				<image src="../../static/img/fengsu.png"></image>
				<text>风速</text>
			</view>
			<view class="item">
				<image src="../../static/img/moshi.png"></image>
				<text>模式</text>
			</view>			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.air{
		.content{
			text-align: center;
			padding-bottom: 130upx;
			padding-top: 40upx;
			image{
				height:299upx;
				width: 565upx;
			}		
		}
		.btn{
			display: flex;
			margin-bottom: 70upx;
			.item{
				flex: 1 1 auto;
				text-align: center;
				image{
					width: 88upx;
					height:88upx
				}
				text{
					display: block;
					font-size: 28upx;
					color: #000;
				}
				.temperature{
					position: relative;
					width: 262upx;
					height: 88upx;
					line-height: 88upx;
					background: url(../../static/img/air-tj.png) no-repeat center center;
					background-size:100% 100%;				
					image{
						width: 100%;
						height: 100%;
					}
					.minus{
						position: absolute;
						left: 34upx;
						top: 10upx;
						z-index: 999;
						width: 34upx;
						height: 34upx;						
						image{
							width: 34upx;
							height: 34upx;	
						}
					}
					.plus{
						position: absolute;
						right: 34upx;
						top: 10upx;
						z-index: 999;
						width: 34upx;
						height: 34upx;			
						image{
							width: 34upx;
							height: 34upx;	
						}
					}
				}
			}
		}
		
	}

</style>
